<template>
  <div class="nav-bar">
    <el-menu mode="horizontal" :default-active="navName">
        <el-menu-item v-for="submenus in menuList"  @click="navClick(submenus)"
            :index="submenus.name" :key="submenus.name">
            {{submenus.title}}
        </el-menu-item>
    </el-menu>
  </div>
</template>

<script>
export default {
    name: 'nav-bar',
    data() {
        return {
            navName: '',
            menuList: [
                {
                    name: 'index',
                    title: '主页'
                },
                {
                    name: 'register',
                    title: '浏览器认证'
                },
                {
                    name: 'upload',
                    title: '上传页面'
                },
                // {
                //     name: 'back-stage',
                //     title: '后台'
                // },
            ]
        }
    },
    methods: {
        navClick(item) {
            if(this.$route.name != item.name) {
                this.$router.replace({name: item.name})
            } else {
                window.location.reload()
            }
        }
    },
    created() {
        this.navName = this.$route.name
    }
}
</script>

<style lang="scss" scoped>
.nav-bar {
    width: 100%;
    display: flex;
    ::v-deep {
        .el-menu {
            flex: 1;
            margin-bottom: 15px;
            display: flex;
            justify-content: space-between;
            .el-menu-item {
                height: 30px;
                line-height: 30px;
            }
        }
    }
}
</style>